<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="860px" append-to-body v-drag-fullscreen>
      <el-row>
        <el-col :span="18">
          <el-row>
            <el-col :span="24" style="margin-top: 10px;" v-for="(item,index) in queryParams">
              <el-row>
                <el-col :span="4">
                  <div style="margin-left: 5px;"></div>
                  <el-select v-model="item.matchType">
                    <el-option
                      v-for="item in matchTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <div style="margin-left: 5px;">
                    <el-select v-model="item.propName" @change="(v)=>propNameChange(v,item)" placeholder="选择查询字段">
                      <el-option
                        v-for="item in columns"
                        :key="item.key"
                        :label="item.title"
                        :value="item.key"
                      ></el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div style="margin-left: 5px;">
                    <el-select v-model="item.queryType"  placeholder="查询方式">
                      <el-option
                        v-for="item in conditionTypeOptions"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                      ></el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div style="margin-left: 5px;">
                    <template v-if="item.column && item.column.type == 'select'">
                      <l-select
                        v-model="item.value"
                        :typeCode="item.column.typeCode"
                      />
                    </template>
                    <template v-else-if="item.column && item.column.type == 'date'">
                      <el-date-picker
                        v-model="item.value"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                      </el-date-picker>
                    </template>
                    <template v-else-if="item.column && item.column.type == 'room'">
                      <room-filterable @cv="(v)=>item.value=v" />
                    </template>
                    <template v-else>
                      <el-input
                        v-model="item.value"
                        :placeholder="item.placeholder||'请输入值'"
                        clearable
                        @keyup.enter.native="handleQuery"
                      />
                    </template>
                  </div>
                </el-col>
                <el-col :span="4">
                  <el-button icon="el-icon-plus" class="add-min-but" @click="addQuery" size="mini" ></el-button>
                  <el-button icon="el-icon-minus" class="add-min-but" v-if="index !== 0" @click="minusQuery(item,index)" size="mini" ></el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>保存的查询</span>
            </div>
            <template v-for="item in savaQueryParams" >
              <div class="sava-item-main">
                <span class="sava-item-class" @click="clickQuery(item)" >{{item.title}}</span>
                <i class="el-icon-close" @click="closeQuery(item)"></i>
              </div>

            </template>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-divider></el-divider>
        <el-button style="left: 20px;position: absolute;" type="primary" @click="resetting">重置</el-button>
        <el-button style="left: 90px;position: absolute;" @click="saveSearchQuery">保存查询条件</el-button>
        <el-button type="primary" @click="cancel">关 闭</el-button>
        <el-button @click="searchQuery">查 询</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      name: "LSuperQuery",
      data(){
        return {
          open:false,
          title:'高级查询构造器',
          matchTypeOptions:[
            {label:'AND(是)',value:'AND'},
            {label:'OR(或)',value:'OR'},
            {label:'NOT(非)',value:'NOT'},
          ],
          queryParams:[
            { matchType:'AND' , propName:'' ,queryType:'EQ',value:'',column:{},alias:'t'}
          ],
          //保存的查询条件
          savaQueryParams:[],
          //查询方式字典
          conditionTypeOptions:[]
        };
      },
      created(){
        this.getDicts('condition_type').then(res=>{
          this.conditionTypeOptions = res.data
        })
      },
      methods:{
        show(){
          let queryParamSrc = localStorage.getItem(`${this.keyName}_queryParams`);
          if(queryParamSrc){
            this.savaQueryParams = JSON.parse(queryParamSrc);
          }
          this.open = true
        },
        addQuery(){
          this.queryParams.push(this.getParams())
        },
        minusQuery(row,index){
          this.queryParams.splice(index,1)
        },
        getParams(){
          return{
            matchType:'AND' , propName:'' ,queryType:'EQ',value:'',column:{},alias:'t'
          }
        },
        checkQueryParams(){
          for(let i in this.queryParams){
            let row = this.queryParams[i]
            if(!row.propName || !row.value){
              this.msgError("查询条件不能为空!")
              return false;
            }
          }
          return true;
        },
        getQueryParams(){
          let queryParams = []
          for(let i in this.queryParams){
            let row = this.queryParams[i]
            if(row.propName && row.value){
              queryParams.push({
                matchType:row.matchType,
                propName:row.propName ,
                queryType:row.queryType,
                value:row.value,
                alias:row.column.alias||'t'
              })
            }
          }
          return queryParams;
        },
        propNameChange(v,item){
          let index = this.columns.findIndex(x=>x.key == v)
          if(index != -1){
            item.column = this.columns[index]
          }else{
            item.column = {}
          }
        },
        cancel(){
          this.open = false
        },
        searchQuery(){
          this.$emit("searchQuery",JSON.stringify(this.getQueryParams()))
          this.open = false
        },
        resetting(){
          this.queryParams = []
          this.queryParams.push(this.getParams())
          this.searchQuery()
          this.$emit("resetting")
        },
        saveSearchQuery(){
          if(!this.checkQueryParams())return;
          this.$prompt('请输入保存的条件名称', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            this.savaQueryParams.push({
              title:value,
              id:this.$utils.timestamp(),
              queryParams:this.queryParams
            })
            localStorage.setItem(`${this.keyName}_queryParams`,JSON.stringify(this.savaQueryParams))
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消保存'
            });
          });
        },
        clickQuery(item){
          this.queryParams = item.queryParams
        },
        closeQuery(item){
          let index = this.savaQueryParams.findIndex(x=>x.id = item.id)
          this.savaQueryParams.splice(index,1);
          localStorage.setItem(`${this.keyName}_queryParams`,JSON.stringify(this.savaQueryParams))
        }
      },
      props: {
        columns:{
          type:Array,
          default:[]
        },
        keyName:{
          type:String,
          default:''
        }
      }
    }
</script>

<style scoped>
  .add-min-but{
    padding: 10px;
    float: left;
    margin-left: 5px;
  }

  .sava-item-main{
    line-height: 20px;
    font-size: 12px;
    margin: 5px;
  }

  .sava-item-class{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    width: 90%;
    display: block;
    float: left;
  }

</style>
